<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="advancedresume.css">

</head>

<body>
    <div id='top-line'></div>
    <div id='top-left-line'></div>
    <div id='top-right-line'></div>

    <img src='images/background.gif' alt="backgroundImage" id='background'>

    <div id='head-background'></div>

    <header>

        <div id='name-logo'>刘希睿</div>

        <img src='images/那棵树.png' alt="头像" id="head-portrait">

        <div class='link'>
            <a href='#introduction'>个人介绍</a>
            <div class='line'></div>
            <a href='#project'>项目介绍</a>
            <div class='line'></div>
            <a href='#interaction'>给我留言</a>
        </div>

    </header>

    <section id='vision'>
        <h1>web前端职业发展愿景</h1>
        <p id='vision-text'>
            熟练使用HTML，CSS，JavaScript；熟悉C/C++，Java；了解python</br>
            </br>
            ★ 数据结构、算法等基本功扎实，熟悉C/C++、Python等编程语言；</br>
            ★ 熟悉HTML5、CSS3、ES6，熟悉git工具；</br>
            ★ 有较强的学习能力和逻辑思维，有独立思考、解决问题的能力和良好的团队沟通、协作能力；
        </p>
        <div id='img-Email'>
            <img src='images/Email.png' alt="img-Email">
            <p> lllxirui@163.com</p>
        </div>
        <div id='img-Phone'>
            <img src='images/Phone.png' alt="img-Phone">
            <p>+86 150 5557 6899</p>
        </div>
    </section>

    <section id='introduction'>

        <div id='introduction-skill'>

            <h1>技能掌握</h1>

            <div id='introduction-skill-block'>

                <div id='introduction-skill-text'>
                    <p>HTML</p>
                    <p>CSS</p>
                    <p>JavaScript</p>
                    <p>C</p>
                    <p>C++</p>
                    <p>Python</p>
                    <p>Java</p>
                </div>

                <div class='introduction-skill-bar'>
                    <div id="introduction-skill-bar1"></div>
                    <div id="introduction-skill-bar2"></div>
                    <div id="introduction-skill-bar3"></div>
                    <div id="introduction-skill-bar4"></div>
                    <div id="introduction-skill-bar5"></div>
                    <div id="introduction-skill-bar6"></div>
                    <div id="introduction-skill-bar7"></div>
                    <div id="introduction-skill-bar8"></div>
                </div>

            </div>

        </div>

        <div id='introduction-experience'>

            <ul id="ul-experience-choose">
                <li id="li-experience-choose1"><a href="#">教育经历</a></li>
                <li id="li-experience-choose2"><a href="#">工作经历</a></li>
                <li id="li-experience-choose3"><a href="#">参赛经历</a></li>
            </ul>

            <div id="expreience1">

                <div class="experience-years">
                    <div class="years">
                        2002—2007
                    </div>
                    <div class="years-content">
                        幼儿园，没什么好说的
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2007—2013
                    </div>
                    <div class="years-content">
                        小学，红领巾
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2013—2016
                    </div>
                    <div class="years-content">
                        初中，学习ing
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2016—2019
                    </div>
                    <div class="years-content">
                        决战高考1095天！
                    </div>
                </div>

                <div class="experience-last">
                    <div class="years">
                        2019-
                    </div>
                    <div class="years-content">
                        <b>合肥工业大学 计算机科学与技术/本科</b></br>
                        </br>
                        <b>加权均分：</b> 85.57</br>
                        <b>GPA：</b> 3.49/4.3</br>
                        <b>专业排名：</b> 52/244</br>
                        </br>
                        <b>专业核心课程及分数：</b></br>
                        <span style="width:30px; display:inline-block"></span> 计算机网络(81)
                        <span style="width:30px; display:inline-block"></span> 操作系统(81)
                        <span style="width:30px; display:inline-block"></span> 计算机体系结构(90)
                        </br>
                        <span style="width:30px; display:inline-block"></span> 程序设计(90)
                        <span style="width:40px; display:inline-block"></span>机器学习(90)
                        <span style="width:40px; display:inline-block"></span>编译原理(85)

                    </div>
                </div>

            </div>

            <div id="expreience2">

                <div class="experience-years">
                    <div class="years">
                        2002—2007
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 22年
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2007—2013
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 16年
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2013—2016
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 10年
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2016—2019
                    </div>
                    <div class="years-content">
                        准备参加工作 -- 7年
                    </div>
                </div>

                <div class="experience-last">
                    <div class="years">
                        2019-
                    </div>
                    <div class="years-content">
                        要不还是好好学习吧 -- 4年
                    </div>
                </div>

            </div>

            <div id="expreience3">

                <div class="experience-years">
                    <div class="years">
                        2001—2007
                    </div>
                    <div class="years-content">
                        xxx
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2007—2013
                    </div>
                    <div class="years-content">
                        诗歌朗诵县一等奖
                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2013—2016
                    </div>
                    <div class="years-content">
                        征文比赛校一等奖</br>

                    </div>
                </div>

                <div class="experience-years">
                    <div class="years">
                        2016—2019
                    </div>
                    <div class="years-content">
                        三好学生

                    </div>
                </div>

                <div class="experience-last">
                    <div class="years">
                        2019-
                    </div>
                    <div class="years-content">
                        第九届ACM程序设计大赛二等奖</br>
                        Robocup机器人大赛2D项目组二等奖</br>
                        商业计划书三等奖</br>
                        优秀班干部
                    </div>
                </div>

            </div>

    </section>



    <section id='project'>

        <div>
            <div style="position: relative;">
                <div class="O-background"></div>
                <div class="proj-picture">
                    <img src="images/PM.jpg" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project1" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/PM.jpg" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">基于线性回归的PM2.5预测</div>

                            <div class="project-time">2020.04 - 2020.05</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">算法设计、开发</div>
                            <div class="line"></div>
                            <div class="project-organization">合肥工业大学</div>
                        </div>

                        <div class="project-content">

                            收集合肥地区过去一段时间的 PM2.5 值，基于Python环境下的构建线性回归模型，对今年某个月的空气质量值进行预测。</br>
                            </br>
                            本工程使用普通线性回归模型，使用矩阵模型进行矩阵计算初始化参数。</br>
                            </br>
                            使用梯度下降方法对线性回归的模型参数进行训练，并分别对训练集和测试集的预测精度进行评价。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">Python</div>
                            <div class="line"></div>
                            <div class="project-tag">线性回归模型</div>
                            <div class="line"></div>
                            <div class="project-tag">梯度下降算法</div>

                        </div>
                </div>
            </div>
        </div>

        <div>
            <div style="position: relative;">
                <div class="E-background"></div>
                <div class="proj-picture">
                    <img src="images/xczx.JPG" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project2" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/xczx.JPG" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">学成在线</div>

                            <div class="project-time">2021.12 - 2021.12</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">逻辑设计、开发、测试</div>
                            <div class="line"></div>
                            <div class="project-organization">合肥工业大学</div>
                        </div>

                        <div class="project-content">

                            <b>Gitee仓库：<a href="https://gitee.com/lsyanling/exploring-the-universe">https://gitee.com/lsyanling/exploring-the-universe</a></b></br>
                            <b><a href="https://lsyanling.gitee.io/exploring-the-universe-build/">查看Demo</a></b>
                            </br>
                            </br>

                            一个纯HTML、CSS开发的学习网站页面</br>


                        </div>

                        <div class="proj3">

                            <div class="project-tag0">Cocos Creator</div>
                            <div class="line"></div>
                            <div class="project-tag">TypeScript</div>
                            <!-- <div class="line"></div>
                            <div class="project-tag">JavaScript</div> -->

                        </div>
                </div>
            </div>
        </div>

        <div>
            <div style="position: relative;">
                <div class="O-background"></div>
                <div class="proj-picture">
                    <img src="images/pyShopping.JPG" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project1" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/pyShopping.JPG" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">品优购</div>

                            <div class="project-time">2022.02 - 2022.03</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">个人项目</div>
                            <div class="line"></div>
                            <div class="project-organization">合肥工业大学</div>
                        </div>

                        <div class="project-content">

                            <b>Gitee仓库：<a href="https://gitee.com/lsyanling/html-restaurant-game">https://gitee.com/lsyanling/html-restaurant-game</a></b></br>
                            <b><a href="http://lsyanling.gitee.io/html-restaurant-game/">查看Demo</a></b>
                            </br>
                            </br>

                            一个纯HTML、CSS、JavaScript开发的网上商城页面，包含简单的点击交互和动画效果；</br>
                            </br>
                            包括轮播图、商品放大镜和购物车效果。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">HTML</div>
                            <div class="line"></div>
                            <div class="project-tag">CSS</div>
                            <div class="line"></div>
                            <div class="project-tag">JavaScript</div>

                        </div>
                </div>
            </div>
        </div>

        <div>
            <div style="position: relative;">
                <div class="E-background"></div>
                <div class="proj-picture">
                    <img src="images/Resume.jpg" alt="项目的DEMO图" style="width: 100%;height: 100%;">
                </div>
                <div id="project1" class="projects">
                    <div class="div-proj-div">
                        <div class="project-img">
                            <div><img src="images/Resume.jpg" alt="项目的LOGO图" class="proj-img"></div>
                        </div>
                    </div>
                    <di class="project-all">

                        <div class="proj1">
                            <div class="project-head">HTML Resume</div>

                            <div class="project-time">2021.07 - 2021.07</div>
                        </div>

                        <div class="proj2">
                            <div class="project-role">个人项目</div>
                            <div class="line"></div>
                            <div class="project-organization">百度前端训练营</div>
                        </div>

                        <div class="project-content">

                            <b>Gitee仓库：<a href="https://gitee.com/lsyanling/html-resume">https://gitee.com/lsyanling/html-resume</a></b></br>
                            <b><a href="http://lsyanling.gitee.io/html-resume/">查看Demo</a></b>
                            </br>
                            </br>

                            一个纯HTML、CSS、JavaScript开发的简历页面，包含简单的点击交互和动画效果，需要在PC端查看。

                        </div>

                        <div class="proj3">

                            <div class="project-tag0">HTML</div>
                            <div class="line"></div>
                            <div class="project-tag">CSS</div>
                            <div class="line"></div>
                            <div class="project-tag">JavaScript</div>

                        </div>
                </div>
            </div>
        </div>

    </section>

    <section class='interact'>

        <div class='interact-atlas'>

            <div class='atlas-first-row'>

                <div class='interact-atlas-pic'>

                    <p>请给我点赞</p>

                    <div class='redheart-box' id='box1'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart1'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart1'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>Please</p>

                    <div class='redheart-box' id='box2'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart2'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart2'>

                    </div>
                </div>
                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box3'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart3'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart3'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box4'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart4'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart4'>

                    </div>

                </div>

            </div>

            <div class='atlas-second-row'>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box5'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart5'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart5'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box6'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart6'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart6'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box7'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart7'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart7'>

                    </div>

                </div>

                <div class='interact-atlas-pic'>

                    <p>baidu</p>

                    <div class='redheart-box' id='box8'>

                        <img src='images/whiteheart.png' class='whiteHeart'>

                        <img src='images/redheart.png' class='redHeart' id='redheart8'>

                        <img src='images/redheart.png' class='flyHeart' id='flyheart8'>

                    </div>

                </div>

            </div>

        </div>

        <div class='interact-message' id='interact'>

            <h1>留言板</h1>

            <div class='interact-message-content'>

                <div class='interact-message-content-block' id='firstBox'>

                    <div class='personal-information'>

                        <div class='header-pic'>

                            <p>W</p>

                        </div>

                        <p class='personal-name'>WANG</p>

                    </div>

                    <div class='personal-message'>

                        <p>这个人很懒，什么也没说</p>

                    </div>

                </div>

                <div class='interact-message-content-block'>

                    <div class='personal-message'>
                        <p>这个人也很懒，什么也没说</p>
                    </div>

                    <div class='personal-information'>

                        <div class='header-pic'>

                            <p style="margin: 0px;">L</p>

                        </div>

                        <p class='personal-name'>lsyanling</p>

                    </div>

                </div>

                <div class='interact-message-content-block' id='firstBox'>

                    <div class='personal-information'>

                        <div class='header-pic'>

                            <p>W</p>

                        </div>

                        <p class='personal-name'>WANG</p>

                    </div>

                    <div class='personal-message'>

                        <p>这个人更懒，什么也没说</p>

                    </div>

                </div>


            </div>

            <div class='interact-message-speaking'>

                <input id='message-input' type='text' placeholder="很遗憾，留言板未完工">

                <div id='input-block'>

                    <input id='name-input' type='text' placeholder="在这里输入您的名字">

                    <input id='message-submit' type='submit' value='发表'>

                </div>

            </div>

        </div>

    </section>

    <footer>
        <p>你好呀</p>
        <p>谢谢阅读</p>
    </footer>

    <script src="advancedresume.js"></script>
</body>

</html>